<template>
  <div id="app">
    <div class="logo-container">
      <img src="@/assets/logo.jpg" alt="Logo" />
    </div>
    <navbar v-if="shouldShowNavbar"></navbar>
    <router-view/>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'

export default {
  components: {
    Navbar
  },
  data() {
    return {
      isLoggedIn: false // 初始状态为未登录
    };
  },
  computed: {
    // 依赖Vue Router的$route对象来决定是否显示Navbar
    shouldShowNavbar() {
      // 检查是否在登录页面或注册页面
      const noNavbarRoutes = ['/', '/register', '/login']; // 列出不显示Navbar的路由
      return this.isLoggedIn && !noNavbarRoutes.includes(this.$route.path);
    }
  },
  created() {
    // 从localStorage读取登录状态
    this.isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';

    // 监听路由变化来及时更新是否显示Navbar
    this.$router.afterEach((to, from) => {
      // 可以在这里添加更复杂的状态管理逻辑，如果需要的话
      this.isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
    });
  }
}
</script>

<style scoped>
.logo-container img {
  width: 100%; /* 这将使图片宽度适应容器宽度 */
  max-width: 2000px; /* 最大宽度限制为300像素 */
  height: auto; /* 保持图片的纵横比 */
  display: block; /* 确保没有额外的空间 */
  margin: 0 auto; /* 图片居中显示 */
}
</style>